import { Button, Modal } from "antd";
import React, { useState } from "react";
import styles from "./PreviewVideo.module.css";
import "./PreviewVideo.css";

export const VideoPreview = (props: { url: string }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpen = () => setIsModalOpen(true);
  const handleClose = () => setIsModalOpen(false);

  return (
    <div className={styles.previewBox}>
      <video
        src={props.url}
        className={styles.preview}
        onClick={handleOpen}
      ></video>
      <Modal
        open={isModalOpen}
        onCancel={handleClose}
        footer={null}
        closeIcon={null}
        destroyOnClose
        centered
        className="previewContainer"
        width="90vw"
      >
        <video controls className={styles.vid}>
          <source src={props.url} type="video/mp4" />
          您的浏览器不支持 HTML5 视频播放。
        </video>
      </Modal>
    </div>
  );
};
